<% 
	var headContent = {
	include("/STATIC/TEMPLATE/head.html",{HEAD_TITLE:'fixi-music首页'}){}
%>
		<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/normalize.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/component.css" />
		<style type="text/css">
			.text-center {
				width: 100%;
				text-align: center;
				position: absolute;
				top: 12%;
			}
		</style>
<%
};

var bodyContent = {
%>

		<div class="container">
			<div class="text-center">
				<h1 style="font-size: 2.5em;">Fixi Music</h1>
				<h1 style="font-size: 3.5em;">在最美的时光里,让你遇到你想听的声音</h1>
			</div>
			<div id="morphsearch" class="morphsearch">
				<form class="morphsearch-form" action="home/search.html" method="post">
					<input class="morphsearch-input" name="keys" type="text" placeholder="歌曲名/歌手/类别" />
					<button class="morphsearch-submit" type="submit">Search</button>
					<button type="submit">Search</button>
				</form>

				<div class="morphsearch-content">
					<div class="dummy-column">
						<h2>推荐歌曲</h2>
						<% for(s in songs!){ %>
						<a class="dummy-media-object" href="home/play.html?id=${s.songId }">
							<h3>${s.songName }</h3>
						</a>
						<% } elsefor{ %>
							<h3>暂无歌曲列表</h3>
						<% } %>
						<a class="dummy-media-object" href="JavaScript:void(0)">
							<h3>更多...</h3>
						</a>
					</div>
					<div class="dummy-column">
						<h2>推荐歌手</h2>
						<% for(s in singers!) { %>
						<a class="dummy-media-object" href="home/search.html?keys=${s.singerName }">
							<h3>${s.singerName }</h3>
						</a>
							<% } elsefor{ %>
							<h3>暂无歌曲列表</h3>
						<% } %>
						<a class="dummy-media-object" href="JavaScript:void(0)">
							<h3>更多...</h3>
						</a>
					</div>

					<div class="dummy-column">
						<h2>热门分类</h2>
						<a class="dummy-media-object" href="JavaScript:void(0)">
							<h3>怀旧经典</h3>
						</a>
						<a class="dummy-media-object" href="JavaScript:void(0)">
							<h3>古典</h3>
						</a>
						<a class="dummy-media-object" href="search?keys=流行">
							<h3>流行</h3>
						</a>
						<a class="dummy-media-object" href="JavaScript:void(0)">
							<h3>轻音乐</h3>
						</a>
						<a class="dummy-media-object" href="JavaScript:void(0)">
							<h3>交响乐</h3>
						</a>
						<a class="dummy-media-object" href="JavaScript:void(0)">
							<h3>更多...</h3>
						</a>
					</div>
				</div>
				<!-- /morphsearch-content -->
				<span class="morphsearch-close"></span>
			</div>
			<!-- /morphsearch -->

			<div class="overlay"></div>

		</div>
		<!-- /container -->

		<script type="text/javascript" src="js/classie.js"></script>
		<script type="text/javascript">
			(function() {
				var morphSearch = document.getElementById('morphsearch'),
					input = morphSearch.querySelector('input.morphsearch-input'),
					ctrlClose = morphSearch.querySelector('span.morphsearch-close'),
					isOpen = isAnimating = false,
					// show/hide search area
					toggleSearch = function(evt) {
						// return if open and the input gets focused
						if (evt.type.toLowerCase() === 'focus' && isOpen) return false;
						var offsets = morphsearch.getBoundingClientRect();
						if (isOpen) {
							classie.remove(morphSearch, 'open');
							// trick to hide input text once the search overlay closes 
							// todo: hardcoded times, should be done after transition ends
							if (input.value !== '') {
								setTimeout(function() {
									classie.add(morphSearch, 'hideInput');
									setTimeout(function() {
										classie.remove(morphSearch, 'hideInput');
										input.value = '';
									}, 300);
								}, 500);
							}
							input.blur();
						} else {
							classie.add(morphSearch, 'open');
						}
						isOpen = !isOpen;
					};
				// events
				input.addEventListener('focus', toggleSearch);
				ctrlClose.addEventListener('click', toggleSearch);
				// esc key closes search overlay
				// keyboard navigation events
				document.addEventListener('keydown', function(ev) {
					var keyCode = ev.keyCode || ev.which;
					if (keyCode === 27 && isOpen) {
						toggleSearch(ev);
					}
				});
				/***** for demo purposes only: don't allow to submit the form *****/
				morphSearch.querySelector('button[type="submit"]').addEventListener('click', function(ev) {
					ev.preventDefault();
				});
			})();
		</script>

<%}; %>
<% layout("/STATIC/TEMPLATE/_layout.html",{head:headContent,body:bodyContent}){ %>
<%}; %>